<template>
<div>
<!--  <div ref="dragItem" :style="style" class="drag-item">拖动我 {{ x }}, {{ y }}</div>-->
  <UseDraggable class="drag-item" v-slot="{ x, y }" :initial-value="{ x: 10, y: 10 }" storage-key="vueuse-draggable" storage-type="session">
    Drag me! I am at {{ x }}, {{ y }}
  </UseDraggable>
</div>
</template>
<script setup lang="ts">
/*import {ref} from "vue";
import {useDraggable} from "@vueuse/core";

defineOptions({
  name: "UseDraggableX"
})
const dragItem = ref<HTMLElement | null>(null)

const { x, y, style } = useDraggable(dragItem, {
  initialValue: { x: 0, y: 0 }
})*/
import { UseDraggable } from "@vueuse/components";
</script>
<style lang="css" scoped>
.drag-item {
  user-select: none;
  cursor: move;
  position: fixed;
}
</style>
